<template>
	<view class="wanl-order-list u-flex-col craftsmanList">
		<view>
			<view class="padding-bj" v-if="false">
				<u-search placeholder="请输入商品名称" v-model="keyword" @search="loadData('search')"
					@custom="loadData('search')"></u-search>
			</view>
			<goods-tabs item-width='25%' active-color="#FD5241" :list="navList" :is-scroll="true"
				v-model="tabCurrentIndex" name="text_show"></goods-tabs>
		</view>
		<swiper :current="tabCurrentIndex" style="flex: 1;" duration="300" @change="changeTab" class="swiperBox">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 订单列表 -->
					<block v-if="tag.list.length > 0">
						<view class="u-p-t-16 forBox" v-for="(goods, index) in tag.list" :key="index">
							<!-- 商品选择 -->
							<view class="goodsBox"
								@click="$wanlshop.to('/pages/user/reservation/details?id=' + goods.id)">
								<view class="tar toptitle">
									<view :style="{color:orderStateExp(goods.status).stateTipColor}">
										{{orderStateExp(goods.status).stateTip}}
									</view>
								</view>
								<view class="flex mt24 c3d f28 " v-if="goods.type == 1">
									<image class="goodsimg" :src="$wanlshop.oss(goods.image)" mode=""></image>
									<view class="ml24  minwidth">
										<view class="f32 c3d fb">
											全屋装修
										</view>
										<view class="qwfx">
											{{goods.work_type == 1 ? '全屋新装': '全屋翻新'}}
										</view>

									</view>
								</view>
								<view class="mt20 overflow_1 toptitle">
									<u-icon name="map" color="#FD5241" size="28"></u-icon>
									<text class="ml16 f28 c3d">
										{{goods.address}}
									</text>
								</view>
								<view class="flex_sb mt24">
									<view class="info f24">
										创建时间：{{goods.createtime_text}}
									</view>
									<view class="" v-if='goods.status == 0'>
										<u-button class="qxyy" shape='circle' @click="cancelReservation(goods.id)">
											取消预约
										</u-button>
									</view>
								</view>

							</view>
						</view>
					</block>
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何数据" v-if="tag.loaded === true && tag.list.length === 0" />

					<uni-load-more v-else :status="tag.loadingType" :content-text="contentText" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('wanlshop:user'),
				contentText: {
					contentdown: '下拉展示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				scrollTop: 0,
				tabCurrentIndex: 0,
				navList: [{
						state: '',
						text: '全部',
						text_show: '全部',
						key: 'normal',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 0,
						text: '已预约',
						text_show: '已预约',
						key: 'examine',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 2,
						text: '已取消',
						text_show: '已取消',
						key: 'sell_out',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
					{
						state: 1,
						text: '已联系',
						text_show: '已联系',
						key: 'hidden',
						loadingType: 'more',
						current_page: 1,
						list: []
					},
				],

				ts: 0,
				keyword: ''
			};
		},
		onLoad(options) {
			if (!options.state) {
				options.state = 0;
			}

		},
		onShow() {
			this.setloadData()
		},
		methods: {


			cancelReservation(id) {
				let _this = this
				uni.showModal({
					title: '取消预约',
					content: '预约取消后，需重新预约',
					confirmText: '确认取消',
					cancelText: '我再想想',
					success: function(res) {
						if (res.confirm) {
							_this.$api.post({
								url: '/user/cancelTask',
								data: {
									id: id
								},
								success: res => {
									_this.$wanlshop.msg('已取消')
									_this.setloadData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			setloadData() {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				navItem.loadingType = 'more'
				navItem.current_page = 1
				navItem.list = []
				this.loadData()
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下

				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				let status = navItem.key
				console.log('loadData', index, navItem);
				if (source == 'search') {
					navItem.current_page = 1
					navItem.loadingType = 'more'
					navItem.list = []
				}
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}

				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				let data = {
					status: state,
					page: navItem.current_page
				}
				if (this.keyword.length > 0) {
					data['title'] = this.keyword
				}

				// 获取列表
				this.$api.get({
					url: '/user/taskList?',
					data: data,
					success: res => {
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						console.log(res)
						let orderList = res.data;
						orderList.forEach(item => {
							navItem.list.push(item);
						});
						console.log(navItem)
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},

			//swiper 切换
			changeTab(e) {
				let tabIndex = this.tabCurrentIndex;
				this.tabCurrentIndex = e.detail.current
				let navItem = this.navList[tabIndex];
				let list = navItem.list;
				list.forEach(item => {
					item.checked = false;
				})

				console.log(e)
				this.loadData('tabChange');

			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#333';
				switch (+state) {
					// :-1=全部,0=待签约,1=进行中,2=待验收,3=已完成,4=已取消
					case 0:
						stateTip = '已预约，待平台联系';
						stateTipColor = '#f40';
						break;
					case 1:
						stateTip = '平台已联系';
						stateTipColor = '#1A1A1A';
						break;
					case 2:
						stateTip = '已取消';
						stateTipColor = '#777';
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor
				};
			},

		}
	};
</script>

<style lang="scss" scoped>
	.qxyy {
		width: 188rpx;
		height: 60rpx;
		padding: 0;
		font-size: 28rpx;
		color: #616161;
		text-align: center;
	}

	.qwfx {
		margin-top: 14rpx;
		background: rgba(255, 150, 163, 0.08);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FF2F25;
		line-height: normal;
		padding: 12rpx 4rpx;
	}

	.craftsmanList {
		.craftsmanListTabs {
			::v-deep .u-scroll-view {

				.u-tab-item {
					font-size: 24rpx !important;
					font-weight: bold;
				}


			}
		}
	}

	.forBox {
		padding: 24rpx 14rpx 0rpx;

		.goodsBox {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx 34rpx;

			.tags {
				background: #E9F0FC;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 4rpx 10rpx;
				margin-right: 8rpx;
				font-size: 20rpx;
				margin-bottom: 8rpx;
				white-space: nowrap;
			}

			.toptitle {
				padding-bottom: 16rpx;
				border-bottom: 1rpx solid #eee;
			}

			.titleTag {
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #3583F0;
				font-size: 20rpx;
				color: #3583F0;
				margin-left: 12rpx;
				padding: 2rpx 16rpx;
			}
		}

		.goodsimg {
			width: 274rpx;
			height: 160rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.tagsBox {
			overflow-x: scroll;
			overflow-y: hidden;

		}
	}

	.biImg {
		position: fixed;
		z-index: 4;
		bottom: 160rpx;
		width: 180rpx;
		height: 180rpx;
		right: 0rpx;
	}

	.wanl-order-list {
		height: 100vh;
	}

	@import "@/all.scss";

	page {
		height: 100%;
	}

	.wanl-cart-foot {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 997;
		min-height: 52px;
		background-color: #ffffff;
		padding: 0 12px;
	}

	.wanl-cart-goods {
		background-color: #ffffff;

		.picture {
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.content {
			.title {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.count {
				font-weight: 500;
				font-size: 24rpx;
				color: #757575;
				line-height: 34rpx;
				color: #757575;
			}

			.price {
				font-weight: 400;
				font-size: 24rpx;
				color: #FF4900;
				line-height: 34rpx;
			}
		}
	}

	.wanl-cart-foot {
		.cu-btn:not(:nth-child(1)) {
			margin-left: 16rpx;
		}
	}
</style>